<template>
	<div class="modal">
		<Modal v-model="data.isShow" :mask-closable="false" width="800" :styles="{top: '60px'}">
			<p slot="header" class="header-view">查看大图</p>
			<div class="main-view">
                <img :src="data.data.smallList[data.data.index]" alt="">
				<div class="left" @click="clickTurn('left')"><Icon type="chevron-left"></Icon></div>
				<div class="right" @click="clickTurn('right')"><Icon type="chevron-right"></Icon></div>
			</div>
			<div slot="footer">
				<Button @click="clickClose">关闭</Button>
			</div>
		</Modal>
	</div>
</template>

<script>
export default {
	props: ['data'],
	data() {
		return {
			
        }
	},
	mounted() {
	},
	methods: {
		clickTurn(type) {
			if (type == 'left') {
				if (this.data.data.index == 0) {
					this.data.data.index = this.data.data.smallList.length - 1;
				} else {
					this.data.data.index -= 1;
				}
			} else {
				if (this.data.data.index >= this.data.data.smallList.length - 1) {
					this.data.data.index = 0;
				} else {
					this.data.data.index += 1;
				}
			}
		},
		clickClose() {
			this.data.isShow = false;
			this.data.setting.autoplay = true;
		}
	}
}	
</script>

<style scoped lang="less">
.header-view {
	text-align: center;
	font-size: .14rem;
	color: #433E41;
}
.main-view {
	width: 100%;
	height: 7rem;
	position: relative;
	img {
        width: 100%;
        height: 100%;
	}
	.left {
		position: absolute;
		top: 45%;
		left: .2rem;
		width: .6rem;
		text-align: center;
		line-height: .6rem;
		color: #ffffff;
		font-size: .3rem;
		height: .6rem;
		border: .01px solid #ffffff;
		border-radius: 100px;
	}
	.right {
		position: absolute;
		top: 45%;
		right: .2rem;
		width: .6rem;
		text-align: center;
		line-height: .6rem;
		color: #ffffff;
		font-size: .3rem;
		height: .6rem;
		border: .01px solid #ffffff;
		border-radius: 100px;
	}
}

</style>